<template>
  <div class="echartsBox">
    <div v-if="list.length > 0" id="personTaskLine" class="allWidthHeight" />
    <div v-else class="kong">暂无数据</div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  props: {},
  data() {
    return {
      myChart: null,
      list: []
    }
  },
  watch: {},
  mounted() {},
  methods: {
    infoSize() {
      this.myChart.resize()
    },
    async getInfoEcharts(time) {
      const res = await this.$axios.post('/board/pro/monitor/staffDayTask', {
        searchDay: time
      })
      if (res?.data.code === 200) {
        this.list = res.data.data
        let obj = {
          finishNums: [],
          taskNums: [],
          userNames: []
        }
        res.data.data.forEach((item) => {
          obj.finishNums.push(item.finishNum)
          obj.taskNums.push(item.taskNum)
          obj.userNames.push(item.userName)
        })
        setTimeout(async () => {
          this.setPersonTaskLine(obj)
        }, 500)
      }
    },
    /* 人员任务echarts */
    setPersonTaskLine(data) {
      if (this.list.length > 0) {
        const option = {
          grid: {
            left: '10%', // 距离左侧的距离
            right: '2%', // 距离右侧的距离
            top: '22%', // 距离顶部的距离
            bottom: '14%' // 距离底部的距离
          },
          legend: {
            data: ['任务量', '完成量'],
            right: '0',
            top: '0',
            textStyle: {
              fontSize: '12px',
              color: '#fff' // 这里设置图例的字体颜色为红色
            },
            itemWidth: 10, // 设置图例标记的图形宽度
            itemHeight: 10 // 设置图例标记的图形高度
          },
          xAxis: [
            {
              splitLine: { show: false },
              axisPointer: {
                type: 'shadow'
              },
              axisLine: {
                // 坐标轴 轴线
                lineStyle: {
                  color: '#fff',
                  width: 1,
                  type: 'solid'
                }
              },
              axisLabel: {
                color: '#fff',
                formatter: '{value}',
                interval: 0 // 代表显示所有x轴标签显示
              },
              axisTick: {
                show: false
              },
              type: 'category',
              data: data.userNames
            }
          ],
          yAxis: [
            {
              axisLabel: {
                show: true,
                color: '#fff'
              },
              type: 'value'
            }
          ],
          dataZoom: [
            {
              type: 'inside'
            }
          ],
          series: [
            {
              name: '任务量',
              type: 'bar',
              data: data.taskNums,
              itemStyle: { color: '#28CEAB' }
            },
            {
              name: '完成量',
              type: 'bar',
              data: data.finishNums,
              itemStyle: { color: '#217CE1' }
            }
          ]
        }
        if (
          this.myChart != null &&
          this.myChart !== '' &&
          this.myChart !== undefined
        ) {
          this.myChart.dispose() // 销毁
        }
        this.myChart = echarts.init(document.getElementById('personTaskLine'))
        this.myChart.clear()
        this.myChart.setOption(option, true)
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.echartsBox {
  width: 100%;
  padding: 0 15px;
  height: 100%;
}
.kong {
  background-size: 50% auto;
}
</style>
